<template>
	<div class="home">
		<div class="home__top" style="align-items: center;justify-content: space-between;">
			<div style="display: flex;align-items: center;">
				<div class="form_item">
					<div class="label">
						比例:
					</div>
					<el-input placeholder="100%" suffix-icon="el-icon-arrow-down" v-model="form.value1">
					</el-input>
				</div>
				<div class="form_item">
					<div class="label">
						格线:
					</div>
					<el-input placeholder="都有" suffix-icon="el-icon-arrow-down" v-model="form.value1">
					</el-input>
				</div>
				<div class="form_item sf">
					<div class="label">
						缩放:
					</div>
					<el-input placeholder="110" v-model="form.value1">
						<!-- <template slot="prepend">制单日期 :</template> -->
						<i class="el-icon-arrow-left" slot="prepend"></i>
						<i class="el-icon-arrow-right" slot="append"></i>
					</el-input>
				</div>
				<div class="form_item">
					<div class="label">
						行高:
					</div>
					<el-input placeholder="110" v-model="form.value1">
					</el-input>
				</div>
				<div class="form_item">
					<div class="label">
						页码:
					</div>
					<el-input placeholder="1/1" v-model="form.value1">
					</el-input>
				</div>
				<div class="form_item">
					<div class="label">
						日期:2024-03-19至2024-04-18
					</div>
					
				</div>
			</div>
			<div class="right">
				<el-checkbox label="标尺"></el-checkbox>
				<div class="right_btn">
					右击补工票
				</div>
			</div>
			
			
		</div>
		<div class="home__con">
			<el-table border :data="tableData" stripe style="width: 100%" :height="`calc(100% - ${footerh}px)`"
				:header-cell-style='{background:"#F9F9F9",color:"#1F163A"}' :cell-style="{color:'#1F163A'}">
				<el-table-column type="index" label="序" width="76">
				</el-table-column>
				<el-table-column prop="bm" label="生产单通知单号" width="120">
				</el-table-column>
				<el-table-column prop="name" label="扎号" width="200">
				</el-table-column>
				<el-table-column prop="bz" label="条码" width="120">
				</el-table-column>
				<el-table-column prop="bz" label="拆分" width="130">
				</el-table-column>
				<el-table-column prop="ys" label="唯一码" width="100">
				</el-table-column>
				<el-table-column prop="size" label="产品名称" width="130">
				</el-table-column>
				<el-table-column prop="fdw" label="尺码" width="130">
				</el-table-column>
				<el-table-column prop="hsl" label="颜色" width="200">
				</el-table-column>
				<el-table-column prop="gdhs" label="工序" width="250">
				</el-table-column>
				<el-table-column prop="hsxs" label="APP控制" width="200">
				</el-table-column>
			</el-table>
			<div class="footer" ref="footer">
				<div>
					显示第1到第22条记录，总共 3272 条记录
				</div>
				<el-pagination background layout="prev, pager, next,jumper" :total="328">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					value1:''
				},
				btnlist: [{
					text: '定义列名'
				}, {
					text: '全部上传'
				}, {
					text: '全部下载'
				}, {
					text: '导入信息'
				}, {
					text: '扩展信息'
				}, {
					text: '尺码表'
				}, {
					text: '颜色表'
				}, {
					text: '结构'
				}, {
					text: '成本'
				}, {
					text: '分类'
				}, {
					text: '全部'
				}, ],
				tableData: [{
					bm: '生产单通知单号',
					name: '扎号',
					unit: '条码',
					bz: '拆分',
					ys: "唯一码",
					size: '产品名称',
					fdw: '尺码',
					hsl: '颜色',
					gdhs: '工序',
					hsxs: 'APP控制',
				},{
					bm: '生产单通知单号',
					name: '扎号',
					unit: '条码',
					bz: '拆分',
					ys: "唯一码",
					size: '产品名称',
					fdw: '尺码',
					hsl: '颜色',
					gdhs: '工序',
					hsxs: 'APP控制',
				},{
					bm: '生产单通知单号',
					name: '扎号',
					unit: '条码',
					bz: '拆分',
					ys: "唯一码",
					size: '产品名称',
					fdw: '尺码',
					hsl: '颜色',
					gdhs: '工序',
					hsxs: 'APP控制',
				},{
					bm: '生产单通知单号',
					name: '扎号',
					unit: '条码',
					bz: '拆分',
					ys: "唯一码",
					size: '产品名称',
					fdw: '尺码',
					hsl: '颜色',
					gdhs: '工序',
					hsxs: 'APP控制',
				},{
					bm: '生产单通知单号',
					name: '扎号',
					unit: '条码',
					bz: '拆分',
					ys: "唯一码",
					size: '产品名称',
					fdw: '尺码',
					hsl: '颜色',
					gdhs: '工序',
					hsxs: 'APP控制',
				},],
				footerh:67
			}
		},
		created() {
			// this.
		},
		mounted() {
			this.footerh=this.$refs.footer.offsetHeight
			console.log(this.footerh)
		},
	}
</script>
<style scoped>
	.home {
		background-color: #fff;
		height: calc(100% - 26px);
		/* border-radius: 5px; */
		padding: 13px 10px;

	}

	.home__top {
		display: flex;
		align-items: center;

	}

	.home__top__btn {
		cursor: pointer;
		padding: 0 18px;
		height: 50px;
		line-height: 50px;
		background-color: rgba(74, 119, 246, .5);
		color: #231918;
		font-size: 15px;
		margin-right: 1px;
	}

	.home__con {
		margin-top: 10px;
		height: calc(100% - 50px);
	}

	/deep/.el-table .cell {
		text-align: center !important;
	}

	.box {
		width: 60px;
		height: 22px;
		border-radius: 3px;
		text-align: center;
		line-height: 22px;
		color: #fff;
	}
	.footer{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
		padding: 24px 48px;
	}
	.form_item{
		display: flex;
		align-items: center;
		/* width: 200px; */
		justify-content: space-between;
		margin-right: 18px;
	}
	/* .form_item>.el-input__inner{
		width: 200px!important;
	} */
	.label{
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #5E6061;
		flex-shrink: 1;
		width: fit-content;
		white-space: nowrap;
		margin-right: 12px;
	}
	/deep/.el-input-group__prepend{
		width: fit-content!important;
	}
	/deep/.el-input-group__append{
		width: fit-content!important;
		padding: 0 10px;
	}
	/deep/.sf .el-input__inner{
		width: 67px;
		padding: 0 10px;
		text-align: center;
	}
	.right{
		display: flex;
		align-items: center;
		justify-self: flex-end;
	}
	.right_btn{
		padding: 0 26px;
		line-height:31px;
		background: rgba(74,119,246,0.2);
		border: 1px solid #4A77F6;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 14px;
		color: #4A77F6;
		cursor: pointer;
		margin-left: 18px;
	}
</style>